<template>
	<view>
		<view class="nav" :style="{height: navheight}">
			<view class="nav-title">
				<view class="logo">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
						@confirm="confirm" />
				</view>
			</view>
		</view>
		
		<view style="margin-top: 60px;">
			<view class="goods-tj" v-for="tj in tuijiang" :key="tj.id" @click="tjdetails(tj.id)">
			    <view class="goods-top">
			    <view class="goods-name">{{tj.name}}</view>
			    <view class="goods-gz">
			    <van-button type="default" round hairline
			     size="mini">关注</van-button>
			    </view>
			    </view>
			    <view class="goods-sort">
			    <van-tag round color="#eee" text-color="#777" type="default">{{tj.sort}}
				<van-icon size="20rpx" name="arrow" />
			    </van-tag>
			    </view>
			    <view class="goods-image"><image :src="tj.Image" mode=""/></view>
			
			    <view class="goods-bottom">
			    <view>
			    第一话
			    </view>
			    <view>
			        <van-icon name="good-job-o" />{{tj.rank}}
			    </view>
			    </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tuijiang:[],
				navheight: 0,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (e) => {
					this.navheight = `${e.statusBarHeight+36}px`
				},
				fail(er) {
					console.log(er)
				}
			})
			uni.request({
				url: "http://localhost:3000/tuijiang",
			}).then((res) => {
				this.tuijiang = res.data
			})
		},
		methods: {
			tjdetails(e){
				// console.log(e)
				uni.navigateTo({
					url:`/pages/tjdetails/tjdetails?id=${e}`,
				})
			},
		}
	}
</script>

<style>
 .nav {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 6;
	}
	.nav-title {
		display: flex;
		margin-top: 22px;
	}

	.input-view {
		display: flex;
		flex-direction: row;
		width: 400rpx;
		background-color: #f8f8f8;
		height: 33px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		
		line-height: 33px;
	}

	.input-uni-icon {
		line-height: 33px;
	}

	.nav-bar-input {
		height: 33px;
		line-height: 33px;
		width: 300rpx;
		border-radius: 15px;
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
	.logo{
		margin: 0 20rpx;
	}
	.logo image {
		height: 65rpx;
		width: 65rpx;
	}
	.goods-tj {
	    width: 100%;
	    height: 560rpx;
	    margin: 20rpx 0;
	    box-sizing: border-box;
	    padding: 15rpx;
	    border: 1px solid #eee;
	    box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.08);
	    border-radius: 10rpx;
	    background-color: rgba(0,0,0,0);
	    overflow: hidden;
	    }
	.goods-top{
	    display: flex;
	    justify-content: space-between; 
	    font-size: 32rpx;
	}
	.goods-image{
	    height: 375rpx;
	    width: 100%;
	    
	}
	.goods-image image{
	    height: 100%;
	    width: 100%;
	}
	.goods-bottom{
	    margin: 20rpx 0;
	    display: flex;
	    justify-content: space-between; 
	    font-size: 32rpx;
	    color: #777;
	}
	

</style>
